Integration Examples
CSS Usage
<!-- Simple animation -->
<div class="animate-fadeIn">Content</div>
<!-- Staggered list -->
<ul class="stagger-children">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Hover effects -->
<button class="hover-lift">Click me</button>
TypeScript Usage
import { animate, staggerChildren } from '@/extension/styles/animation-utils';
// Simple animation
await animate(element, { type: 'fadeIn' });
// Staggered children
await staggerChildren(container, {
type: 'slideInLeft',
staggerDelay: 100,
});
// Use presets
import { ANIMATION_PRESETS } from '@/extension/styles/animation-utils';
await animate(dialog, ANIMATION_PRESETS.dialog);